<template>
  <div class="canvasAnimation">
    <canvas id="animation" ref="animationRef" width="900" height="900"></canvas>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
@Options({ components: {

} })
export default class CanvasAnimation extends Vue {
  public ctx: CanvasRenderingContext2D |null = null;

  public draw() {
  }
  public mounted() {
    const canvas = this.$refs.animationRef as HTMLCanvasElement;
    this.ctx = canvas.getContext('2d');
    this.draw();
  }
};
</script>

<style lang="postcss">
.canvasAnimation{
  position: relative;
  width: 100%;
  height: 100%;
  #animation{
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
  }
}

</style>
